<template>
  <div class="preview-logic tag-scrollbar">
    <div class="sql-preview-wrapper">
      <template v-for="(item, index) in tagConfigJson">
        <span :key="index" class="preview-item">
          <span class="item-name" v-if="item.reveal !== '自定义'">
            {{ item.reveal }}
            <template v-if="index === 0">
              (
            </template>
          </span>
          <span class="item-content"> {{ item.content }} {{ item.anotherName }} </span>
          <span class="item-name" v-if="index === 0">
            )
          </span>
        </span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tagConfigJson: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.preview-logic {
  flex: 1;
  border: 1px solid #ddd;
  position: relative;
  overflow-y: auto;
  .sql-preview-wrapper {
    width: 100%;
    font-size: 16px;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    span {
      padding: 5px;
      margin: 0 2px;
    }
    .preview-item {
      display: inline-block;
      margin-top: 10px;
    }
    .item-name {
      font-weight: bold;
      color: #4d81ea;
    }
    .item-content {
      font-weight: normal;
      color: #666;
      background-color: #e6eeff;
    }
  }
}
</style>
